.bg-white { background: #fff; }
.bg-black { background: #000; }
.bg-white-4 { background: rgba($color: #fff, $alpha: 0.4); }
.bg-white-9 { background: rgba($color: #fff, $alpha: 0.9); }
.bg-black-2 { background: rgba($color: #000, $alpha: 0.2); }
.bg-black-3 { background: rgba($color: #000, $alpha: 0.3); }
.bg-grey {
  background: #f5f5f5;
}
.bg-benefit {
  background: #f0f7f1;
}

.white { color: #fff; }
.black { color: #000; }
.color-success {
  color: $u-success;
}
.red-1 { color: #f51; }
.warn-1 { color: $u-warning;}
.suc-1 { color: $u-success;}
.color-1 { color: $u-primary;}

.bg-1 {
  background: #2d7a3e;
  color: #fff;
}
.bg-cell {
  background: #fff;
}
.bg-input {
  background: #f4f5f7;
}
.bg-con{
  background: #fff;
}
page {
  background: #f8f8f8;
}

.btn-hover {
  position: relative;
  &:before {
    @extend .pos-mask;
    background: #000;
    border-radius: inherit;
    opacity: 0.1;
    content: " ";
    z-index: 10;
    pointer-events: none;
  }
  .hover-show {
    display: block;
  }
}
.bg-dark1 .btn-hover::before {
  background: #fff;
}

$dark1: #1b1b1b;
$dark2: #292929;
.bg-dark1 {
  background: $dark1;
  color: #fff;
}

@media (prefers-color-scheme: light) {
  .uni-page-head {
    background-color: #fff!important;
  }
}

@media (prefers-color-scheme: dark) {
  $txtColor: #eee;
  .btn-hover::before {
    background: #fff;
  }
  .uni-page-head, .uni-tabbar{
    background-color: $dark1!important;
    color: $txtColor!important;
  }
  page, .bg-con {
    background: $dark1!important;
    color: $txtColor;
  }
  .color-txt {
    color: $txtColor;
  }
  .u-form .u-textarea {
		background-color: $dark2;
	}
  .bg-cell {
    background: #333;
  }
  .bg-benefit {
    background: $dark2;
  }

  body {
    --UI-FG-0: $txtColor;
    .uni-btn-icon {
      color: $txtColor!important;
    }
  }
  page {
    .u-border, .u-border-top, .u-border-bottom, .u-border-left, .u-border-right {
      border-color: #4b4b4b!important;
    }
  }
  .bg-border {
    background: #2f2f2f;
  }
}